<template>
	<view>
		<view class="search-nav">
			<view><uni-search-bar placeholder="搜索内容" radius="8" bgColor="#FFFFFF" @confirm="onSearch" @clear="onCancel" cancelButton="none" @input="onInput" /></view>
			<view class="p10-0">
				<text class="searchBtn" @click="onSearchBtn">搜索</text>
			</view>
		</view>
		<view class="p0-15">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view v-for="item in fileType" :key='item.name' class="scroll-view-item_H">
					<view :class="form.type == item.id ? 'tabs_' : 'tabs'" @click="onSelectType(item.id)">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<uni-list :border="true">
			<uni-list-item v-for="item in dataInfo" :key='item.id' clickable @click="onLink('info/index',item.id)" :title="item.title" :note="'　阅读：' + item.click + '　点赞：' + item.likes_count" showArrow :thumb="item.img" thumb-size="lg"/>
		</uni-list>
		<uni-load-more :status="status" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form:{page:1,type:0,limit:20},
				selectType:0,
				fileType: [],
				dataInfo:[],
				total:0,
				loadData:true,
				status:'more',
			}
		},
		onShow() {
			this.onGetFileType()
			this.onGetFile()
		},
		methods: {
			onGetFile(){
				this.status = 'loading'
				if(!this.loadData){
					this.status = 'no-more'
					return false;
				}
				let _this = this
				this.$request_api('applet_api/information','POST',this.form).then(res => {
					_this.form.page++
					if(_this.dataInfo.length >= res.total){
						_this.loadData = false
						_this.status = 'no-more'
					}
					_this.dataInfo.push(...res.data) 
				}).catch(err => {
					console.log(err)
				})
			},
			onGetFileType(){
				let _this = this
				this.$request_api('applet_api/information/type','GET').then(res => {
					_this.fileType = _this.mapType(res.data)
				}).catch(err => {
					console.log(err)
				})
			},
			onType(e){
				this.form.type = e.detail.value
				this.form.page = 1
				this.form.title = ''
				this.dataInfo = []
				this.onGetFile()
			},
			onReachBottom() {
				this.onGetFile()
			},
			onSelectType(id){
				this.form.page = 1
				this.form.type = id
				this.dataInfo = []
				this.onGetFile()
			},
			onSearch(e){
				this.form.title = e.value
				this.form.page = 1
				this.dataInfo = []
				this.onGetFile()
			},
			onInput(e){
				this.form.title = e
			},
			onSearchBtn(){
				this.form.page = 1
				this.dataInfo = []
				this.onGetFile()
			},
			onCancel(e){
				this.loadData = true
				this.form.title = ''
				this.form.page = 1
				this.dataInfo = []
				this.onGetFile()
			},
			mapType(data){
				let obj = { name: '全部', id: 0 }
				data.unshift(obj)
				return data.map((item) => {
					item.text = item.name
					item.value = item.id
					return item
				});
			},
			onLink(url,id){
				console.log(11)
				uni.navigateTo({
					url: "/pages/information/"+url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.scroll-view_H {white-space: nowrap;width: 100%;}
.title{font-size: .9rem;color: #111;font-weight: 600;height: 40px;}
.company{font-size: .8rem;margin-top: 5px;}
.node{border-top: 1px solid #EEE;padding: 24px 0px;}
.node-image{width: 55px;height: 55px;}
.text {font-size: 14px;margin: 5px 5px 5px 5px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
.grid-item-box {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
}
</style>
